<!DOCTYPE html>
<html>
<!-- 通过百度js模板引擎生成word文档 兼容手机浏览器，但是不知道怎么解析表格  -->
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script>
    <script type="text/javascript" src="http://www.xdocin.com/baiduTemplate.js"></script>
    <style>
        .head{
            font-size: 29px;
            display: block;
        }
        .content{
            display: block;
        }
    </style>
</head>
<body>
<input type="button" onclick="gen('pdf')" value="生成PDF"/>
<input type="button" onclick="gen('docx')" value="生成Word"/>
	<div id="formDiv"></div>
<br/>
<script id="tmpl" type="text/html">

    <xdoc version="A.3.0">
		<div id="formDiv"></div>
        <body>
        <para heading="1" lineSpacing="28">
            <text class="head" valign="center" fontName="标宋" fontSize="29"><%=title%></text>
        </para>
        <para>
          <!--  <img  src="<%=img%>" sizeType="autosize"/> -->
		  <text> </text>
			<table style="border:1px solid red">
				<tr><th>sdfsdf</th></tr>
				<tr><td rowspan = "2"> <div style="width:8px;height:8px;display:inline-block"></div>123123</td></tr>
				<tr><td>123123</td></tr>
			</table>
        </para>
        <para lineSpacing="9">
            <text class="content" fontName="仿宋" fontSize="18"><%=content%>	</text>
			 
			<table style="border:1px solid red" rows="200" cols="200">
			    <tr header="2" data="daaaaaaaaaaa"></tr>
				<tr><td> <div style="width:8px;height:8px"></div>123123</td></tr>
				<tr><td>123123</td></tr>
			</table>

        </para>
        </body>
    </xdoc>
</script>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script>
<script type="text/javascript">
XDoc.form("formDiv", "./box_card.docx", {

});
    var type="docx";//pdf
    var data = {
        title: "导出"+type+"文件",
        img: "http://www.wordlm.com/uploads/allimg/130101/1_130101000405_1.jpg",
        content: "我这样就可以导出"+type+"格式的文件了，是不是很方便",
    };
    function renderTemplate(){
        var template=$("#tmpl").html();
        var html=template.replace(/<%=title%>/,data.title)
                .replace(/<%=img%>/,data.img)
                .replace(/<%=content%>/,data.content);
        $("body").append(html);
    }
    renderTemplate();
    function gen(type) {
        XDoc.to(baidu.template('tmpl', data), type, {}, "_blank");
    }
    console.log('http://www.xdocin.com/xml.html');
</script>
</body>
</html>